<template>
    <div id="addUser" class="mt-4">
        <h2>添加用户</h2>
        <form>
            <div class="form-group">
                <label for="name">姓名</label>
                <input id="name" class="form-control" type="text" placeholder="输入姓名" autocomplete="off" v-model="form.name" />
            </div>
            <div class="form-group">
                <label for="mobilephone">手机</label>
                <input id="mobilephone" class="form-control" type="text" placeholder="输入手机" autocomplete="off" v-model="form.mobilephone" />
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input id="email" class="form-control" type="text" placeholder="输入邮箱" autocomplete="off" v-model="form.email" />
            </div>
            <div class="form-group">
                <label for="education">学历</label>
                <input id="education" class="form-control" type="text" placeholder="输入学历" autocomplete="off" v-model="form.education" />
            </div>
            <div class="form-group">
                <label for="school">毕业学校</label>
                <input id="school" class="form-control" type="text" placeholder="输入毕业学校" autocomplete="off" v-model="form.school" />
            </div>
            <div class="form-group">
                <label for="occupation">职业</label>
                <input id="occupation" class="form-control" type="text" placeholder="输入职业" autocomplete="off" v-model="form.occupation" />
            </div>
            <div class="form-group">
                <label for="introduction">个人简介</label>
                <textarea id="introduction" class="form-control" rows="5" placeholder="输入简介" autocomplete="off" v-model="form.introduction"></textarea>
            </div>
            <button type="submit" class="btn btn-primary btn-block mb-5" @click.prevent="onSubmit">添加</button>
        </form>
    </div>
</template>

<script>

    export default {
        name: "Add",
        data() {
            return {
                form: {
                    name: null,
                    mobilephone: null,
                    email: null,
                    education: null,
                    school: null,
                    occupation: null,
                    introduction: null
                }
            }
        },
        methods: {
            onSubmit() {
                this.axios({
                    method: "POST",
                    url: "http://localhost:3000/user",
                    data: this.qs.stringify(this.form)
                }).then(response => {
                    document.getElementById("message").innerHTML=`<div class="alert alert-success alert-dismissible fade show" role="alert">添加用户成功！<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>`;
                    this.$router.push({name: "Home"});
                }).catch(error => console.log(error))
            }
        }
    }
</script>

<style scoped>
    /**/
</style>